<template>
	<view class="top">
		<view class="img1">
			<image src="/static/logo.png" mode="aspectFit" class="img_logo" @click="Goto(0)"></image>
		</view>
		<view class="category_bar">
			<view class="nav-item" :class="{ active: path === 0 }" @click="Goto(0)">
				<text class="nav-text">首页</text>
			</view>
			<view class="nav-item" :class="{ active: path === 1 }" @click="Goto(1)">
				<text class="nav-text">文章</text>
			</view>
			<view class="nav-item" :class="{ active: path === 2 }" @click="Goto(2)">
				<text class="nav-text">资源</text>
			</view>
			<view class="nav-item" :class="{ active: path === 4 }" @click="Goto(4)">
				<text class="nav-text">写文章</text>
			</view>
			<view class="nav-item" :class="{ active: path === 5 }" @click="Goto(5)">
				<text class="nav-text">文章管理</text>
			</view>
		</view>
		<view class="img1 push_right">
			<image src="/static/my.png" mode="aspectFit" class="img_logo" @click="Goto(3)"/>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'nav-bar',
		props: {
			idx: {
				type: Number,
				default: 0
			}
		},
		computed: {
			path() {
				return this.idx
			}
		},
		methods: {
			Goto(e) {
				if(e==0)
				{
					uni.navigateTo({
						url:'/pages/index/index'
					})
				}
				else if(e==1)
				{
					uni.navigateTo({
						url:'/pages/article/article'
					})
				}
				else if(e==2)
				{
					uni.navigateTo({
						url:'/pages/resource/resource'
					})
				}
				else if(e==3)
				{
					uni.navigateTo({
						url:'/pages/my/my'
					})
				}
				else if(e==4)
				{
					uni.navigateTo({
						url:'/pages/write/write'
					})
				}
				else if(e==5)
				{
					uni.navigateTo({
						url:'/pages/edit/edit'
					})
				}
			}
		}
	}
</script>

<style scoped>
.top {
	display: flex;
	align-items: center;
	padding: 20rpx 40rpx;
	background-color: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	position: sticky;
	top: 0;
	z-index: 100;
}

.img1 {
	height: 100rpx;
	width: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.img_logo {
	height: 50%;
	width: 50%;
	transition: transform 0.3s ease;
}

.img_logo:active {
	transform: scale(0.95);
}

.category_bar {
	display: flex;
	padding-left: 400rpx;
	flex: 1;
}

.nav-item {
	padding: 10rpx 40rpx;
	margin: 0 20rpx;
	font-size: 42rpx;
	position: relative;
	cursor: pointer;
	transition: all 0.3s ease;
}

.nav-text {
	color: #333;
	transition: color 0.3s ease;
}

.nav-item:hover .nav-text {
	color: #4a6572;
}

.nav-item.active .nav-text {
	color: #4a6572;
	font-weight: 600;
}

.nav-item.active::after {
	content: '';
	position: absolute;
	bottom: -4rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background-color: #4a6572;
	border-radius: 2rpx;
}

.push_right {
	margin-left: auto;
}
</style> 